<template>
    <div class="picking zy-content ">
      <div class="searchBox search-box-layout">
        <Row :gutter="24">
          <Col span="4">
            <div>
              <p class="label">{{$t('common.Entity')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.companyId"
                        @on-change="changeCompany"
                        clearable :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item,index) of tagList" :value="item.id" :key="index" :label="item.name">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('common.Warehouse')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.warehouseId" clearable
                        :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item,index) of warehouseList" :value="item.id" :key="index" :label="item.backupName">
                  </Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('common.ApplicationStatus')}}</p>
              <div class="ipt">
                <Select clearable v-model="searchParams.applyStatus"
                        :placeholder="`${$t('common.selectInfo')}`">
                  <Option v-for="(item,index) of applyList" :value="item.id" :key="index" :label="item.name"></Option>
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('common.Appliedby')}}</p>
              <div class="ipt">
                <Select v-model="searchParams.applyBy"
                        filterable clearable :placeholder="`${$t('common.selectInfo')}`"
                        :remote-method="getApplicationOAList"
                >
                  <Option v-for="item of OAList"
                          :value="item.id"
                          :key="item.id"
                          :label="item.showName"
                  />
                </Select>
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label">{{$t('common.ApplieTime')}}</p>
              <div class="ipt">
                <DatePicker
                    v-model="applyTimeList"
                    type="datetimerange"
                    format="yyyy-MM-dd HH:mm:ss"
                    placement="bottom-end"
                    :placeholder="`${$t('common.selectInfo')}`"
                    @on-change="handleRangeChange"
                />
              </div>
            </div>
          </Col>
          <Col span="4">
            <div>
              <p class="label hide-label">--</p>
              <div class="ipt">
                <Button class="search-btn" type="primary"
                        v-has="'applyUselistSeach'"
                        @click="changeNum()">{{ $t('common.Query') }}</Button>
                <Button v-has="'applyUselistSeach'"
                    class="reset-btn"
                    @click="reset()"
                >{{ $t('common.reset') }}
                </Button>
              </div>
            </div>
          </Col>
        </Row>
      </div>

        <div class="list-layout mt16">
          <div class="btns clear">

            <span class="title">{{ $t('common.listInformation') }}</span>
            <Button v-has="'applyUseNewadd'"
                    @click="addRecipients">{{ $t('common.NewPicking') }}</Button>
            <template v-if="selectList && selectList.length" >
              <Button v-has="'applyUseDelete'" @click="handleOutDel">{{ $t('common.Delete') }}</Button>
            </template>
          </div>
          <div class="tableContent">
            <Table
                border
                ellipsis
                class="resizable-table"
                ref="selection"
                @on-selection-change="onSelectChange"
                @on-column-width-resize="onColumnWidthResize"
                :columns="columns"
                :data="dataArr">
              <template slot-scope="{ row }" slot="applyStatus">
                {{ (row.applyStatus !== '') && applyList.find(val => val.id === Number(row.applyStatus)).name }}
              </template>
              <template slot-scope="{ row }" slot="approvalStatus">
                {{ (row.approvalStatus !== '') && approvalList.find(val => val.id === Number(row.approvalStatus)).name }}
              </template>
              <template slot-scope="{ row }" slot="action">
                <template  v-if="Number(row.applyStatus) === 1 && Number(row.approvalStatus) === 0">
                   <span class="operationBtn"
                         v-has="'applyUseCallback'"
                         @click="deleteListInfo(row,'callback')">
                       <i class="iconfont zy-common-fanhui"></i> {{ $t('common.Withdraw') }}
                    </span>
                </template>

                <template  v-if="Number(row.approvalStatus) !== 0 && Number(row.applyStatus) === 1">
                  <span class="operationBtn"
                        v-has="'applyUselistCheck'"
                        @click="addRecipients('detail',row)">
                        <i class="iconfont zy-common-chakan"></i>{{ $t('common.Check') }}
                    </span>
                </template>
                <template  v-if="Number(row.applyStatus) !== 1">
                    <span class="operationBtn" v-has="'applyUseEdit'" @click="addRecipients('edit',row)">
                        <i class="iconfont zy-common-bianji"></i>{{ $t('common.Edit') }}
                    </span>
                </template>
                <template v-if="Number(row.applyStatus) !== 1">
                   <span class="operationBtn"
                         v-has="'applyUseDelete'"
                         @click="deleteListInfo(row,'delete')">
                        <i class="iconfont zy-common-shanchu"></i>{{ $t('common.Delete') }}
                    </span>
                </template>
              </template>
            </Table>
          </div>
          <div class="pageWrap mt16">
            <pageLeftTitle :total="total" :selected="selectList.length"/>
            <Page :total="total"
                  :page-size="pageSize"
                  :page-size-opts="pageSizeOption"
                  :current="pageNum"
                  @on-change="changePageNum"
                  @on-page-size-change="changePageSize"
                  show-sizer show-total/>
          </div>

        </div>
        <Modal :mask-closable="false"
            v-model="delShowstaus"
            :title="tarStrTitle"
            class="modal-title-layout"
        >
          <div class="icon red">
            <i class="iconfont zy-common-shanchu"></i>
          </div>
          <p class="title">
            <span>{{tarStr}}</span>
          </p>
            <div slot="footer">
                <Button type="default" @click="delShowstaus = false">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" @click="deleteList">{{ $t('确认') }}</Button>
            </div>
        </Modal>

        <Modal :mask-closable="false"
            v-model="resultInfoVis"
            title="领用申请编辑"
            class="modal-content-layout"
        >
            <Form ref="infoAcceptCheckForm"
                  :model="formInfo"
                  label-position="top">
                <FormItem :label="$t('equipmentscrapped.AssetNo')" required>
                    <Input v-model="formInfo.assetsNo" disabled placeholder="请填写资产编号"/>
                </FormItem>
                <FormItem :label="$t('preliminary.PurchasingOrderNumber')" required>
                    <Input v-model="formInfo.orderNo" disabled placeholder="请填写采购订单号"/>
                </FormItem>
                <FormItem :label="$t('common.AssetClassfication')" required>
                    <Select
                        v-model="formInfo.assetId"
                        filterable
                        clearable
                        :placeholder="`${$t('common.selectInfo')}`"
                        class="Input-wrapper"
                    >
                        <Option v-for="item in assetsList"
                                :value="item.id"
                                :key="item.id">{{ item.details }}
                        </Option>
                    </Select>
                </FormItem>
                <FormItem :label="$t('equipmentscrapped.OriginalValue')" required>
                    <Input v-model="formInfo.assetsOriginal" @on-change="assetsChange" placeholder="请填写资产原值"/>
                </FormItem>
                <FormItem :label="$t('equipmentscrapped.ResidualValue')" required>
                    <Input disabled v-model="formInfo.assets" placeholder="请填写资产残值"/>
                </FormItem>
            </Form>
            <div slot="footer">
                <Button type="default" @click="handleCancel">{{ $t('common.Cancle') }}</Button>
                <Button type="primary" @click="handleOk">{{ $t('maintenance.Confirmed') }}</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import fileDownload from 'js-file-download'
import toggleTableOperation from "@/mixins/toggleTableOperation";
export default {
    name: "picking",
    mixins:[toggleTableOperation],
    components: {},
    data() {
        return {
            tarStr: '',
            delShowstaus: false,
            applyTimeList: [],
            formInfo: {},
            selectList: [],
            resultInfoVis: false,
            pageNum: 1,
            pageSize: 10,
            total: 0,
            searchParams: {
                companyId: '',
                warehouseId: '',
                applyStatus: '',
                applyStartTime: '',
                applyEndTime: '',
            },
            pageSizeOption: [10, 20, 30, 40],
            warehouseList: [],
            tagList: [{id: '', name: '全部'}],
            applyList: [
                {id: 0, name: '保存'},
                {id: 1, name: '已提交'},
                {id: 2, name: '撤回'},
                // {id:3,name:'已驳回'},
            ],
            approvalList: [
                {id: 0, name: '待审批'},
                {id: 1, name: '审批通过'},
                {id: 2, name: '驳回'},
                {id: 3, name: '审批未通过'},
            ],
            columns: [
                {type: 'selection', width: 60, align: 'center'},
                {
                    title: `${this.$t('common.ApplieTime')}`,
                    key: 'applyTime',
                    align: "center",
                    width: 180,
                    resizable: true,tooltip: true,
                },
                {
                    title: `${this.$t('common.ApprovalTime')}`,
                    key: 'approvalTime',
                    align: "center",
                  width: 180,
                  resizable: true,tooltip: true,
                },
                {
                    title: `${this.$t('common.ApplicationStatus')}`,
                    key: 'applyStatus',
                    slot: "applyStatus",
                    align: "center",
                  width: 150,
                  resizable: true,tooltip: true,
                },
                {
                    title: `${this.$t('common.ApprovalStatus')}`,
                    slot: "approvalStatus",
                    key: 'approvalStatus',
                    align: "center",
                  width: 150,
                  resizable: true,tooltip: true,
                },
                {
                    title: `${this.$t('common.Entity')}`,
                    key: 'companyName',
                    align: "center",
                  width: 150,
                  resizable: true,tooltip: true,
                },
                {
                    title: `${this.$t('common.Warehouse')}`,
                    key: 'warehouseName',
                    align: "center",
                    minWidth: 150,
                  resizable: true,tooltip: true,
                },
                {
                    title: `${this.$t('common.ApplicationQuantit')}`,
                    key: 'applyNum',
                    align: "center",
                    minWidth: 170,
                  resizable: true,tooltip: true,
                },
                {
                    title: `${this.$t('common.Appliedby')}`,
                    key: 'applyBy',
                    align: "center",
                    minWidth: 120,
                  resizable: true,tooltip: true,
                },
                {
                    title: `${this.$t('common.Approvedby')}`,
                    key: 'approvalBy',
                    align: "center",
                    minWidth: 120,
                  resizable: true,tooltip: true,
                },
                {
                    title: `${this.$t('common.operation')}`,
                    slot: "action",
                    minWidth: 180,
                    align: "center",
                    fixed: 'right'
                }
            ],
            assetsList: [],
            dataArr: [],
            OAList: [],
            tarDelobj: {},
            timerId: null,
            tarStrinfo: "",
            tarStrTitle:""
        }
    },
    created() {
        this.getColumnWidth(this.columns)
        this.getCompanyList()
        this.searchList()
    },
    methods: {
        reset(){
            this.searchParams = {};
            this.applyTimeList = []
            this.searchList()
        },
        getApplicationOAList(query) {
            if (query !== '') {
                this.loading = true
                this.axios({
                    method: 'get',
                    url: '/basic/user/searchOAUser',
                    params: {
                        key: query
                    }
                }).then(res => {
                    if (res.code === 200) {
                        this.OAList = res.data.map(item => {
                            return {
                                ...item,
                                showName: item.empno + '----' + item.username
                            }
                        })
                    } else {
                        this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                    }
                }).finally(() => {
                    this.loading = false
                })
            } else {
                this.OAList = []
            }
        },
        backClick({id}) {
            this.axios({
                method: 'get',
                url: '/dms/applyUse/applyStatus',
                params: {
                    id,
                    applyStatus: 2
                }
            }).then(res => {
                if (res.code == 200) {
                    this.$Message.success(({content: '撤回成功', duration: 6, closable: true}));
                    this.searchList()
                }
            })
        },
        addRecipients(str, row) {
            let query = {
                status: str
            }
            if (row) {
                query.id = row.id
                query.companyId = row.companyId
                query.companyName = row.companyName
            }
            this.$router.push({
                path: '/spareParts/operations/addrecipientsapply',
                query
            })
        },
        changeCompany(val) {
            let companyId;
            if (val) {
                companyId = this.tagList.find(item => item.id == val).id
                this.getwarehouseList(companyId)
            } else {
                this.searchParams.warehouseId = ''
                this.warehouseList = []
            }
        },
        getwarehouseList(companyId) {
            this.warehouseList = []
            this.axios({
                method: 'post',
                url: '/dms/dmsBackupConfig/queryBackupsByCompany',
                data: {
                    companyId
                }
            }).then(res => {
                if (res.data && res.data.length) {
                    this.warehouseList = res.data
                }
            })
        },
        assetsChange() {
            if (this.timerId) {
                clearTimeout(this.timerId)
            }
            this.timerId = setTimeout(() => {
                this.axios({
                    method: 'get',
                    url: '/dms/dmsCheck/calculationAsset',
                    params: {
                        original: Number(this.formInfo.assetsOriginal),
                        id: this.formInfo.id,
                        assetId: this.formInfo.assetId
                    }
                }).then(res => {
                    this.formInfo.assets = res.data
                })
            }, 600)
        },
        handleCancel() {
            this.resultInfoVis = false
        },
        handleOk() {
            this.axios({
                method: 'post',
                url: '/dms/dmsCheck/updateAsset',
                data: {
                    original: Number(this.formInfo.assetsOriginal),
                    id: this.formInfo.id,
                    assetId: this.formInfo.assetId,
                    assets: this.formInfo.assets
                }
            }).then((res) => {
                this.handleCancel()
            })
        },
        onSelectChange(val) {
            this.selectList = val
        },
        //公司列表
        getCompanyList() {
            this.axios({
                method: 'get',
                url: '/basic/company/getCompanyListByUser',
                params: {}
            }).then(res => {
                if (res.code === 200) {
                    let arr = res.data.map(item => {
                        return {
                            ...item,
                            id: item.id.toString()
                        }
                    })
                    this.tagList = [...this.tagList, ...arr]
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        },
        handleRangeChange(val) {
            this.searchParams.applyStartTime = val[0]
            this.searchParams.applyEndTime = val[1]
        },
        //删除
        deleteListInfo(row, str) {
            this.tarDelobj = row
            this.tarStrinfo = str
            switch (str) {
                case 'delete':
                    this.selectList = [this.tarDelobj]
                    this.tarStr = this.$t('删除后不会继续生成领用申请任务，是否确认删除？')
                    this.tarStrTitle = this.$t('删除')
                    break;
                case 'callback':
                    this.tarStr = this.$t('撤回后不会继续生成领用申请任务，是否确认撤回？')
                  this.tarStrTitle = this.$t('撤回')
                    break;
            }
            this.delShowstaus = true
        },
        deleteList() {
            switch (this.tarStrinfo) {
                case 'delete':
                    // let ids = [this.tarDelobj].map(val=>val.id)
                    // this.axios({
                    //   method: 'get',
                    //   url: `/dms/applyUse/delete?ids=${ids.join(',')}`
                    // }).then(res=>{
                    //   if (res.code == 200){
                    //     this.searchList()
                    //   }
                    // })
                    this.handleOutDel()
                    break;
                case 'callback':
                    this.backClick(this.tarDelobj)
                    break;
            }
            this.delShowstaus = false
        },
        //批量删除
        handleOutDel() {
            if (!(this.selectList && this.selectList.length)) {
                this.$Message.error(`${this.$t('common.deleteItems')}`)
                return
            }
            const ids = this.selectList.map(val => val.id)
            this.axios({
                method: 'get',
                url: `/dms/applyUse/delete?ids=${ids.join(',')}`
            }).then(res => {
                if (res.code == 200) {
                    this.searchList()
                    this.$Message.success(res.msg)
                } else {
                    this.$Message.error(res.msg)
                }
            })
        },
        //刷新
        handleFresh() {
            this.searchList();
        },
        changeNum() {
            this.pageNum = 1;
            this.searchList();
        },
        changePageSize(pageSize) {
            this.pageSize = pageSize;
            this.searchList();
        },
        changePageNum(val) {
            this.pageNum = val;
            this.searchList();
        },
        searchList() {
            let params = {
                pageNum: this.pageNum,
                pageSize: this.pageSize,
                ...this.searchParams
            }
            this.axios({
                method: 'get',
                url: '/dms/applyUse/list',
                params: params
            }).then(res => {
                if (res.code === 200) {
                    this.dataArr = res.data.list
                    this.total = res.data.total
                } else {
                    this.$Message.warning(({content: res.msg, duration: 6, closable: true}));
                }
            })
        }
    }
}
</script>

<style scoped lang="scss">

.picking {

    .formList {
        padding: 30px;

        .btn {
            margin-top: 20px;
            text-align: center;
            width: 100%;
            height: 40px;
        }

        .inputBorder {
            border: 1px solid #dcdee2;
            border-radius: 4px;

        }
    }
}
</style>

